<template>
  <el-select
    v-model="keyword"
    class="w-60"
    filterable
    clearable
    :placeholder="placeholder"
    remote
    :loading="loading"
    :remote-method="handleSearch"
    @change="handleSearch"
  >
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.label!"
    ></el-option>
  </el-select>
</template>
<script lang="ts" setup>
interface IEmit {
  (event: 'update:modelValue', value: string): void
  (event: 'update:loading', value: boolean): void
  (event: 'search', value: string): void
}

interface IProps {
  modelValue?: string
  loading?: boolean
  options?: LabelValue<string | number>[]
  placeholder?: string
  maxlength?: number
}
const emit = defineEmits<IEmit>()
const props = withDefaults(defineProps<IProps>(), {
  loading: false,
  placeholder: useI18nContent('common.global.input')
})
const keyword = useVModel(props, 'modelValue', emit)
const handleSearch = keyword => {
  emit('search', keyword)
}
</script>
